<template>
  <scroll-view scroll-y class="asset" @scrolltolower="lower()" v-if="isShowPage">  
    <pagehead pagesPath="/pagesMain/user/user">账号总览</pagehead>
    <view class="asset-top">
      <view class="item" v-for="(item, index) in aseetTypes" :key="index"
        :style="{ background: 'url(' + item.src + ') 100% /cover no-repeat' }">
        <view class="txt">{{ item.name }}</view>
        <view class="price">{{ (item.price) }}</view>
        <view class="asset-flex">
        <view class="btn" v-if="item.type"
          @tap.stop="item.type == 'withdrawal' ? goWithdrawal(item) : $tools.jump('/pages/goods/goodsList',2)">
          {{ item.type == 'withdrawal' ? '提现' : '去兑换' }}</view>
          <view class="btn" v-if="item.type1 == 'transfer'" style="margin-left: 10rpx;"
          @tap.stop="$tools.jump('/pages/asset/transfer', item.status)">互转</view>
          <view class="btn" v-else style="opacity: 0;"></view>
        </view>
      </view>
    </view>
    <view class="tab">
      <view v-for="(item, index) in tab" :key="index" :class="[currentIndex == index ? 'active' : '', 'item']"
        @tap="changeTab(index,item.status)">{{ item.name }}</view>
    </view>
    <view class="asset-sort">
      <view class="info">
      <view class="label">开始时间</view>
      <view class="txt">
        <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
          @change="startDatePicker">
          <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择' }}</view>
        </picker>
      </view>
      <image :src="IMAGE_STATIC+'/images/arrow-down.png'" class="ico" mode="heightFix" />
    </view>
    <view class="info border-b">
      <view class="label">结束时间</view>
      <view class="txt">
        <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
          @change="endDatePicker">
          <view>{{ chooseObj.endData ? chooseObj.endData : '请选择' }}</view>
        </picker>
      </view>
      <image :src="IMAGE_STATIC+'/images/arrow-down.png'" class="ico" mode="heightFix" />
    </view>
    </view>
    <view class="asset-summy">
      <view><text>收入：{{ (total) }}{{currentIndex == 2 ? '积分':'元'}}</text>
      <text style="margin-left: 10rpx;">支出：{{ (total1) }}{{currentIndex == 2 ? '积分':'元'}}</text></view>
      <!-- <view @tap.stop="modelSortShow = !modelSortShow">筛选
        <image :src="IMAGE_STATIC+'/images/sort.png'" class="ico" mode="heightFix" />
      </view> -->
    </view>
    <view scroll-y class="asset-scroll" @scrolltolower="lower()" v-if="isShowPage">
      <view class="asset-list" v-if="list.length != 0">
        <view v-for="(item) in list" :key="item.id" class="asset-item">
          <view class="info">
            <view class="txt">{{item.op_name}}</view>
            <view class="price">{{ item.num }}</view>
          </view>
          <view class="info">
            <view class="label">{{ item.cre_time }}</view>
            <view class="des"></view>
          </view>
        </view>
      </view>
      <view class="initNoData" v-if="list.length == 0">—暂无内容—</view>
    </view>
     <!-- 筛选弹窗 -->
     <view v-if="modelSortShow" ref="sortPopu" class="model-bg" @tap="modelSortShow = false" :style="{ top: `calc(88rpx + ${statusBarHeight}px)` }">
        <view class="modal" @tap.stop="modelSortShow = true">
          <view class="sortPopu">
            <view class="title">时间</view>
            <view class="info">
              <view class="label">开始时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.startDate" :start="startDateValid" end="2999-12-31"
                  @change="startDatePicker">
                  <view>{{ chooseObj.startDate ? chooseObj.startDate : '请选择开始时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="info">
              <view class="label">结束时间</view>
              <view class="txt">
                <picker mode="date" :value="chooseObj.endData" :start="startDateValid" end="2999-12-31"
                  @change="endDatePicker">
                  <view>{{ chooseObj.endData ? chooseObj.endData : '请选择结束时间' }}</view>
                </picker>
                <image :src="IMAGE_STATIC+'/images/arrow-right.png'" class="ico" mode="heightFix" />
              </view>
            </view>
            <view class="bottom-box">
              <view class="bottom">
                <view class="btn reset" @tap.stop="reset()">重置</view>
                <view class="btn sure" @tap.stop="sure()">确定</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      IMAGE_STATIC: this.$url.assetsPath,
      currentIndex: 0,
      type: '',
      pageIndex: 1,
      pageSize: 10,
      lastId: '',
      lsShow: true,
      isShowPage: true,
      aseetTypes: [
        { name: '分润账户(元)', price: 0, src: this.$url.assetsPath + '/userimage/account-1.png', type: 'withdrawal',status:'01' },
        { name: '其他账户(元)', price: 0, src: this.$url.assetsPath + '/userimage/account-2.png', type: '' },
        { name: '积分', price: 0, src: this.$url.assetsPath + '/userimage/account-3.png', type: 'exchange',type1:'transfer' },
        { name: '奖励(元)', price: 0, src: this.$url.assetsPath + '/userimage/account-4.png', type: 'withdrawal' ,status:'02'},
      ],
      status:'01',
      tab: [
        { name: '分润账户',status:'01' },
        { name: '奖励账户' ,status:'02'},
        { name: '积分账户' ,status:'03'},
      ],
      total: 0,
      total1:0,
      list: [
        // { id: 1, price: '110', createtime: '2024-08-10', no: 'E177267211118741' },
        // { id: 2, price: '110', createtime: '2024-08-10', no: 'E177267211118741' },
      ],
      bankList:[],
      statusBarHeight:0,
      modelSortShow:false,
      chooseObj: {  // 筛选条件
        startDate: this.getDateFirstLast('-'), //开始时间
        endData: this.getDateFirstLast('-',true) //结束时间
      },
      // 选择时间范围
      startDateValid: '1900-01-01',
      statusBarHeight:0,
    };
  },
  onLoad(options) {
    if (options) {
      this.type = options.value1
    }
    this.init();
    const that= this
    //获取手机型号
    uni.getSystemInfo({
      success: function (res) {
      that.statusBarHeight = res.statusBarHeight//状态栏高度
      that.platform = res.platform//机型
      console.log('platform',that.platform ,',statusBarHeight',that.statusBarHeight)
      }
    });
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log('refresh');
    this.init();
    this.isLoadShow = true;
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    console.log("分页");
    if (this.lsShow == true) {
      this.getRecord();
    } else {
      // return this.$tools.toast('到底了');
    }
  },
  methods: {
    init() {
      this.pageIndex = 1
      this.pageSize = 10
      this.lastId = '';
      this.list = [];
      this.getUserWallet();
      this.getWalletRecordSummary()
      this.getRecord();
      this.getBankList()
    },
    // 切换
    changeTab(index,status) {
      if (this.currentIndex != index) {
        this.currentIndex = index
        this.status = status
        this.lastId = '';
        this.list = [];
        this.resFilds()
        this.getWalletRecordSummary()
        this.getRecord();
      }
    },
    // 去提现
    goWithdrawal(item){
      if(this.bankList.length<=0){
        return this.$tools.toastJump('请绑定银行卡','/pages/bank/bank');
      }
      this.$tools.jump('/pages/asset/withdrawal', item.status)
    },
    // 钱包信息
    getUserWallet(){
    const data={
    }
    this.$Ajax('/api/user/info/getUserWalletInfo',data,res => {
      if(res.success){
        this.wallet = res.data.userInfo
        this.aseetTypes[0].price = this.wallet.purse_type_01
        this.aseetTypes[1].price = this.wallet.purse_type_04
        this.aseetTypes[2].price = this.wallet.purse_type_03
        this.aseetTypes[3].price = this.wallet.purse_type_02
      }
    })
    },
    // 流水支出收益统计
    getWalletRecordSummary(){
    const data={
      purse_type:this.status,
      start_date:this.chooseObj.startDate,
      end_date:this.chooseObj.endData,
    }
    this.$Ajax('/api/wallet/info/getWalletRecordSummary',data,res => {
      if(res.success){
        this.total = res.data.walletRecordSummary?res.data.walletRecordSummary.sy_money:0
        this.total1 = res.data.walletRecordSummary?res.data.walletRecordSummary.zc_money:0
      }
    })
    },
    // 列表
    getRecord() {
      let that = this;
      var data = {
        purse_type:this.status,
        start_date:this.chooseObj.startDate,
        end_date:this.chooseObj.endData,
        last_id:this.lastId,
      };
      console.log("data", data);
      uni.showLoading({
        mask: true
      })
      that.$Ajax('/api/wallet/info/getWalletRecordList', data, res => {
        uni.hideLoading();
        that.isShowPage = true;
        that.list = that.list.concat(res.data.walletRecordList);
        console.log('list', this.list)
        if(res.data.walletRecordList.length>0){
          this.lastId = res.data.walletRecordList[res.data.walletRecordList.length-1].id
          this.lsShow = true
        }else{
          this.lsShow = false
        }
      }, err => {
        uni.hideLoading();
        that.isShowPage = true;
      }
      );
    },
    getBankList(){
				let that = this;
				const data = {}
				that.$Ajax('/api/user/account/getUserAccountInfo', data, res => {
					if (res.success) {
						that.bankList = res.data.userAccountInfo;
					}
				}, err => { })
		},
    // 开始时间选择
    startDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.startDate = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) > new Date(this.chooseObj.endData)) {
        this.chooseObj.startDate = this.chooseObj.endData; // 重置开始时间
      } else {
        this.chooseObj.startDate = time;
      }
      this.init();
    },
      // 结束时间选择
    endDatePicker(e) {
      // 获取用户选择的日期
      // this.chooseObj.endData = e.detail.value;
      const time = e.detail.value;
      console.log('选择的日期：', e.detail.value);
      if (new Date(time) < new Date(this.chooseObj.startDate)) {
        this.chooseObj.endData = this.chooseObj.startDate; // 重置开始时间
      } else {
        this.chooseObj.endData = time;
      }
      this.init();
    },
    // 重置
    reset() {
      this.resFilds()
      this.modelSortShow = false
      this.init()
    },
    sure(){
      this.modelSortShow = false
      this.init()
    },
    // 清空数据
    resFilds(){
      this.chooseObj = {  // 筛选条件
        startDate: this.getDateFirstLast('-'), //开始时间
        endData: this.getDateFirstLast('-',true) //结束时间
      }
    },
    lower() {
      console.log("分页");
      if (this.lsShow == true) {
        this.getRecord();
      } else {
        // return this.$tools.toast('到底了');
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.asset {
  position: relative;
  min-height: 100vh;
  height: 100%; /* 显式设置父元素高度 */
  padding-bottom: 20rpx;
  .tab {
    @include flexBetween;
    background: #FFFFFF;
    box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E7E7E7;

    .item {
      width: 50%;
      text-align: center;
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.6);
    }

    .active {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      position: relative;
    }

    .active::before {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-40rpx);
      content: '';
      width: 80rpx;
      height: 8rpx;
      background: #AD2926;
      border-radius: 70rpx;
    }
  }

  &-top {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    @include flexLeft;
    flex-wrap: wrap;

    .item {
      padding: 20rpx;
      width: calc((100% - 20rpx) / 2);
      margin-left: 20rpx;
      border-radius: 20rpx;
      margin-top: 20rpx;
      box-sizing: border-box;
    }

    .item:nth-of-type(2n+1) {
      margin-left: 0;
    }

    .txt {
      font-size: 24rpx;
      color: #C4986B;
      line-height: 28rpx;
    }

    .price {
      font-size: 32rpx;
      color: #C4986B;
      line-height: 38rpx;
      margin-top: 10rpx;
    }

    .btn {
      width: 114rpx;
      text-align: center;
      height: 40rpx;
      line-height: 40rpx;
      background: #AD2926;
      font-size: 20rpx;
      color: #FFFFFF;
      border-radius: 72rpx;
      margin-top: 10rpx;
    }
  }

  &-summy {
    @include flexBetween;
    overflow: hidden;
    width: 100%;
    margin: auto;
    padding: 32rpx 24rpx;
    font-size: 28rpx;
    color: #333;

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }
  }
  &-sort{
    @include flexBetween;
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    position: relative;
    box-sizing: border-box;
    .info{
      @include flexLeft;
      .label{
        font-weight: 500;
        font-size: 28rpx;
        color: #333;
      }
    }
    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .right {
      @include flexLeft;
    }

    .txt {
      margin-left: 14rpx;
    }
  }
  &-scroll {
    overflow: hidden;
    padding-bottom: 40rpx;
  }

  &-list {
    background: #fff;
  }
  &-flex{
    @include flexLeft;
  }
  &-item {
    overflow: hidden;
    width: 93.6%;
    margin: auto;
    border-bottom: 1px solid #eee;
    padding-bottom: 24rpx;
    margin-top: 24rpx;
    font-size: 24rpx;
    color: #000000;

    .top {
      @include flexBetween;
      padding: 0 28rpx;
      padding-bottom: 32rpx;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .name {
        font-size: 28rpx;
      }
    }

    .ico {
      width: 32rpx;
      height: 32rpx;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8rpx;
    }

    .info {
      @include flexBetween;
      // padding: 0 28rpx;
      margin-top: 24rpx;
      font-size: 28rpx;

      .txt {
        color: #333;
        font-weight: bold;
      }

      .label {
        color: #999999;
      }

      .des {
        color: #333;
      }

      .price {
        color: #AD2926;
      }
    }
  }

  &-item:last-of-type {
    border-bottom: none;
  }

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
